<template>
    <el-container class="login-container">
        <el-card class="box-card">
            <h1 class="form-title">
                {{ isRegistering ? "注册账号" : "登录" }}
            </h1>
            <div v-if="!isRegistering" class="login-form">
                <el-form @submit.prevent="submitLogin">
                    <el-form-item label="账号" prop="username">
                        <el-input
                            v-model="loginForm.username"
                            placeholder="请输入账号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                            type="password"
                            v-model="loginForm.password"
                            placeholder="请输入密码"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" native-type="submit"
                            >登录</el-button
                        >
                        <el-button type="text" @click="isRegistering = true"
                            >注册账号</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
            <div v-else class="register-form">
                <el-form @submit.prevent="submitRegister">
                    <el-form-item label="账号" prop="username">
                        <el-input
                            v-model="registerForm.username"
                            placeholder="创建账号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                            type="password"
                            v-model="registerForm.password"
                            placeholder="设置密码"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" native-type="submit"
                            >注册</el-button
                        >
                        <el-button type="text" @click="isRegistering = false"
                            >已有账号？登录</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </el-container>
</template>

<script setup>
import { login, register } from "@/api/user";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const loginForm = ref({
    username: "",
    password: "",
});
const registerForm = ref({
    username: "",
    password: "",
});
const isRegistering = ref(false);
async function submitLogin() {
    const res = await login({ ...loginForm.value });
    if (res.success) {
        ElMessage.success(res.message);
        setStore(res.data);
    } else {
        ElMessage.error(res.message);
    }
}
function setStore(user) {
    store.commit("setUser", user);
    store.commit("changeUserPermissions", "admin");
    router.push("/admin");
}
async function submitRegister() {
    const res = await register({ ...registerForm.value });
    if (res.success) {
        setStore(res.data);
        ElMessage.success(res.message);
    } else {
        ElMessage.error(res.message);
    }
}
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #e0f2f1;
}

.box-card {
    width: 100%;
    max-width: 400px;
    background-color: #f0fff0;
    padding: 20px;
}
.form-title {
    text-align: center;
    color: #2e7d32;
    margin-bottom: 20px;
}
/* Media query for mobile devices */
@media (max-width: 768px) {
    .box-card {
        margin: 20px;
    }
}
</style>
